<template>
  <page-header-wrapper>
    <template #extra>
      <a-button type="primary" v-if="!updateActionDate.state" @click="toStartEdit">
        修改
      </a-button>
      <a-button type="primary" style="margin-left: 10px"
                v-if="updateActionDate.state" @click="toSaveEdit">
        保存
      </a-button>
      <a-button type="primary" style="margin-left: 10px"
                v-if="updateActionDate.state"
                @click="toCancelEdit"
      >
        返回
      </a-button>
    </template>

    <div class="table-page-search-wrapper">
      <a-card title="主页自定义模块配置" :loading="loading||updateActionDate.data==null" style="margin-top: 20px">
        <template #extra>
          <!--          <a-button type="primary" v-if="updateActionDate.state">添加</a-button>-->
        </template>
        <div v-if="!(loading||updateActionDate.data==null)">
          <!--          <a-table :data-source="updateActionDate.data" :columns="[...columns,...(updateActionDate.state?[{slots: { customRender: 'action' },title:'操作'}]:[])]" :pagination="false" bordered  size="small"-->
          <!--          >-->
          <!--            <div slot="action" slot-scope="text,record">-->

          <!--            </div>-->
          <!--          </a-table>-->
          <div style="border-bottom: 1px solid #f0f2f5;padding: 10px 20px;"
               v-for="(goods,index) in updateActionDate.data"
          >
            <a-form>
              <div style="display:flex;flex-wrap: nowrap;flex-direction: row;">
                <a-col>
                  <a-form-item label="商品ID" style="margin-bottom: 0">
                    <!--                    <a-input v-model="goods.id" :read-only="!updateActionDate.state"/>-->

                    {{ goods.id }}
                  </a-form-item>
                </a-col>
                <!--                <a-col flex="auto">-->
                <!--                  <a-form-item label="商品ID">-->
                <!--                    <img :src="goods.mainImage" style="width: 70px;height: 70px;border-radius: 10px">-->
                <!--                    &lt;!&ndash;                    <a-input v-model="goods.id" :read-only="!updateActionDate.state"/>&ndash;&gt;-->

                <!--                  </a-form-item>-->
                <!--                </a-col>-->
                <a-col flex="auto">
                  <a-form-item label="商品名" style="margin-bottom: 0;margin-left: 20px;">
                    <img :src="goods.mainImage" style="width: 70px;height: 70px;" loading="lazy">
                    <!--                    <a-input v-model="goods.id" :read-only="!updateActionDate.state"/>-->
                    {{ goods.name }}
                  </a-form-item>
                </a-col>
                <a-col>
                  <div style="margin-left: 10px;" v-if="updateActionDate.state">
                    <a-button shape="circle" @click="moduleUp(index)" icon="up"
                              :disabled="!updateActionDate.state||index==0"
                              style="margin-left: 5px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;"/>
                    <a-button shape="circle" @click="moduleDown(index)" icon="down"
                              :disabled="!updateActionDate.state||index==updateActionDate.data.length-1"
                              style="margin-left: 5px;display: inline-flex;flex-direction: column;align-items: center;justify-content: center;"/>
                    <a-button type="danger" @click="toDeleteModule(index)" :disabled="!updateActionDate.state"
                              style="margin-left: 5px;">点击删除
                    </a-button>
                  </div>
                  <div v-else>

                  </div>
                </a-col>
              </div>
            </a-form>
          </div>
          <div style="height: 200px;padding: 10px 20px;" v-if="updateActionDate.state">
            <div @click="addNewModule"
                 style="position: relative;width: 100%;height: 100%;text-align: center;background: #fafafa;border: 1px dashed #d9d9d9;border-radius: 4px;cursor: pointer;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
              <a-icon type="plus-circle" style="font-size: 40px" theme="twoTone"/>
              <div style="margin-top: 20px;font-size: 18px;font-weight: bold">点击添加首页推荐的商品</div>
            </div>
          </div>
        </div>
        <div v-else style="height: 300px">

        </div>
        <a-modal :visible="addActionDate.state" :closable="false"
                 @cancel="()=>{addActionDate.state=false;addActionDate.data=null;addActionDate.dataSource=null;}"
                 @ok="toAdd"

        >
          <a-select
            v-if="addActionDate.state"
            show-search
            :value="addActionDate.data==null?null:addActionDate.data.name"
            placeholder="input search text"
            style="width: 100%"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearch"
          >
            <a-select-option v-for="d in addActionDate.dataSource" :key="d.id" @click="handleChange(d)">
              <img :src="d.mainImage" style="width: 50px;height: 50px;" loading="lazy"> {{ d.name }}
            </a-select-option>
          </a-select>
        </a-modal>
      </a-card>
    </div>
  </page-header-wrapper>
</template>

<script>
import {
  addMainPage,
  searchMainPageLast,
  searchRecommendLast,
  updateRecommendByIds
} from "@/api/modules/MainPageRequest";
import {uploadPhoto} from "@/api/image";
import {notification} from "ant-design-vue";
import getOSSInfo from "@/api/OSSRequest";
import MultipartUpload from "@/utils/OSSUtils";
import {searchGood} from "@/api/modules/GoodRequest";

const columns = [
  {
    slots: {customRender: 'img'},
    title: '图片'
  },
  {
    dataIndex: 'name',
    title: '名称'
  },
  {
    slots: {customRender: 'action'},
    title: '操作'
  },
]

export default {
  name: "MainPageRecommendGoodsConfig",
  data() {
    return {
      columns,
      loading: false,
      data: null,
      updateActionDate: {
        data: null,
        state: false
      },
      addActionDate: {
        state: false,
        data: null,
        dataSource: []
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true;
      await this.refreshData()
      this.loading = false;
    },
    async refreshData() {
      let _this = this;
      await searchRecommendLast().then((res) => {
        _this.data = res.data;
        _this.updateActionDate.data = JSON.parse(JSON.stringify(_this.data))
      })
    },
    async toStartEdit() {
      this.updateActionDate.state = true;
    },
    async toCancelEdit() {
      this.updateActionDate.data = JSON.parse(JSON.stringify(this.data))
      this.updateActionDate.state = false;
    },
    async toSaveEdit() {
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data))
      let ids = data.map((value) => {
        if (value == null || value.id == null) return null;
        else return value.id;
      }).filter((value) => {
        return value != null
      })
      let _this = this;
      await updateRecommendByIds(ids).then(async () => {
        _this.loading = true;
        await _this.refreshData();
        notification.success({
          message: '修改成功'
        })
        _this.updateActionDate.state = false;
        _this.loading = false;
      }).catch((res) => {
        notification.warning(res)
      })
    },
    moduleUp(index) {
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data[index - 1]))
      this.updateActionDate.data.splice(index - 1, 1, JSON.parse(JSON.stringify(this.updateActionDate.data[index])))
      this.updateActionDate.data.splice(index, 1, data)
    },
    moduleDown(index) {
      let data = JSON.parse(JSON.stringify(this.updateActionDate.data[index + 1]))
      this.updateActionDate.data.splice(index + 1, 1, JSON.parse(JSON.stringify(this.updateActionDate.data[index])))
      this.updateActionDate.data.splice(index,1, data)
    },
    toDeleteModule(index) {
      this.updateActionDate.data.splice(index, 1)
    },
    addNewModule() {
      this.addActionDate.state = true;
    },
    async handleSearch(val) {
      if (val == null) val = '';
      await searchGood({
        name: val.trim()
      }).then(res => {
        this.addActionDate.dataSource = res.data
      })
    },
    handleChange(val1) {
      this.addActionDate.data = val1
    },
    toAdd() {
      if (this.updateActionDate.data == null) {
        this.updateActionDate.data = [this.addActionDate.data];
      } else {
        this.updateActionDate.data = [...this.updateActionDate.data, this.addActionDate.data];
      }
      this.addActionDate.state = false;
      this.addActionDate.data = null;
      this.addActionDate.dataSource = null;
    }
  },
  computed: {}
}
</script>

<style scoped>

</style>